<template>
    <div class="container">
      <h1>兵种智能推荐系统</h1>
  
      <!-- 表单部分 -->
      <div class="section">
        <!-- 个人信息 -->
        <div class="section">
          <h2>个人信息</h2>
          <div class="form-group">
            <label>姓名：</label>
            <input v-model="formData.name" required>
          </div>
          <div class="form-group">
            <label>性别：</label>
            <select v-model="formData.gender" required>
              <option value="">请选择</option>
              <option value="male">男</option>
              <option value="female">女</option>
            </select>
          </div>
          <div class="form-group">
            <label>年龄：</label>
            <input type="number" v-model.number="formData.age" min="18" max="35" required>
          </div>
          <div class="form-group">
            <label>专业：</label>
            <input v-model="formData.major" required>
          </div>
        </div>
  
        <!-- 体能评估 -->
        <div class="section">
          <h2>体能评估</h2>
          <div class="form-group">
            <label>体能测试结果（0-10分）：</label>
            <div>
              耐力：<input type="number" v-model.number="formData.endurance" min="0" max="10" required>
              力量：<input type="number" v-model.number="formData.strength" min="0" max="10" required>
              敏捷性：<input type="number" v-model.number="formData.agility" min="0" max="10" required>
            </div>
          </div>
          <div class="form-group">
            <label>特长或优势：</label>
            <textarea v-model="formData.strengths" rows="3" required></textarea>
          </div>
        </div>
  
        <!-- 专业背景 -->
        <div class="section">
          <h2>专业背景</h2>
          <div class="form-group">
            <label>主修课程（逗号分隔）：</label>
            <input v-model="formData.courses" required>
          </div>
          <div class="form-group">
            <label>相关技能（如编程、机械设计等）：</label>
            <input v-model="formData.skills" required>
          </div>
          <div class="form-group">
            <label>学术成果/竞赛经历：</label>
            <textarea v-model="formData.achievements" rows="3" required></textarea>
          </div>
        </div>
  
        <!-- 兴趣与特长 -->
        <div class="section">
          <h2>兴趣与特长</h2>
          <div class="form-group">
            <label>兴趣方向（多选）：</label>
            <select v-model="formData.interests" multiple required>
              <option value="technology">技术类（如电子、通信）</option>
              <option value="command">指挥类（如战术策划）</option>
              <option value="logistics">后勤类（如物资管理）</option>
              <option value="combat">战斗类（如步兵、装甲兵）</option>
            </select>
          </div>
          <div class="form-group">
            <label>个人优势（如逻辑思维、团队协作等）：</label>
            <input v-model="formData.advantages" required>
          </div>
        </div>
  
        <!-- 提交按钮 -->
        <button @click="generateRecommendation" class="btn">生成推荐报告</button>
      </div>
  
      <!-- 推荐结果 -->
      <div v-if="recommendation.show" class="section recommendation">
        <h3>经系统综合评估，你适合兵种如下(回答仅供参考！)</h3>
        <div v-for="item in recommendation.items" :key="item.title" class="recommend-item">
          <h4>{{ item.title }}</h4>
          <ul class="reason">
            <li v-for="reason in item.reasons" :key="reason">{{ reason }}</li>
          </ul>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const formData = ref({
    name: '',
    gender: '',
    age: 18,
    major: '',
    endurance: 0,
    strength: 0,
    agility: 0,
    strengths: '',
    courses: '',
    skills: '',
    achievements: '',
    interests: [],
    advantages: ''
  });
  
  const recommendation = ref({
    show: false,
    items: []
  });
  
  const generateRecommendation = () => {
    recommendation.value.show = true;
    recommendation.value.items = [];
  
    // 清空旧推荐
    recommendation.value.items = [];
  
    // 主推兵种
    let mainRecommendation = {
      title: '主推兵种：',
      reasons: []
    };
  
    // 备选兵种
    let secondaryRecommendation = {
      title: '备选兵种：',
      reasons: []
    };
  
    // 详细推荐逻辑
    // 1. 技术类推荐
    if (
      formData.value.major.includes('计算机') ||
      formData.value.skills.includes('编程') ||
      formData.value.interests.includes('technology')
    ) {
      mainRecommendation.title = '电子对抗兵/网络攻防兵';
      mainRecommendation.reasons.push(
        `体能匹配：耐力得分 ${formData.value.endurance}/10，适合技术岗位；`,
        `专业契合：计算机背景可快速掌握军事通信与网络安全技术；`,
        `兴趣匹配：技术类兴趣与岗位需求高度一致；`,
        `技能优势：编程能力可直接应用于网络攻防系统开发。`
      );
  
      // 备选推荐：技术后勤
      secondaryRecommendation.title = '技术后勤兵';
      secondaryRecommendation.reasons.push(
        `综合能力：体能均衡且具备技术背景；`,
        `岗位适配：可参与军事设备维护与技术支持。`
      );
    }
    // 2. 战斗类推荐
    else if (
      formData.value.interests.includes('combat') &&
      formData.value.strength >= 7 &&
      formData.value.agility >= 7
    ) {
      mainRecommendation.title = '特种作战兵';
      mainRecommendation.reasons.push(
        `体能匹配：力量 ${formData.value.strength}/10，敏捷性 ${formData.value.agility}/10，适合高强度战斗任务；`,
        `兴趣匹配：对战斗类岗位有明确兴趣；`,
        `优势匹配：个人优势中提到的团队协作能力；`,
        `实战潜力：可快速适应特种作战小组协作需求。`
      );
  
      // 备选推荐：装甲兵
      secondaryRecommendation.title = '装甲兵';
      secondaryRecommendation.reasons.push(
        `技能适配：力量优势适合操作重型装备；`,
        `战场角色：装甲兵需要高敏捷性和战术执行力。`
      );
    }
    // 3. 后勤类推荐
    else {
      mainRecommendation.title = '后勤保障兵';
      mainRecommendation.reasons.push(
        `综合评估：体能均衡，适合后勤管理；`,
        `专业匹配：非技术类专业可胜任物资调配；`,
        `优势匹配：逻辑思维与组织能力突出；`,
        `岗位需求：后勤系统需要高效协调能力。`
      );
  
      // 备选推荐：医疗兵
      secondaryRecommendation.title = '医疗兵';
      secondaryRecommendation.reasons.push(
        `兴趣匹配：后勤类兴趣与医疗岗位相关；`,
        `技能适配：可结合专业学习医疗技术。`
      );
    }
  
    // 添加到推荐列表
    recommendation.value.items.push(mainRecommendation);
    if (secondaryRecommendation.title) {
      recommendation.value.items.push(secondaryRecommendation);
    }
  };
  </script>
  
  <style scoped>
  body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f5f5f5;
  }
  .container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .section {
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  .form-group input,
  .form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .recommendation {
    margin-top: 30px;
    padding: 20px;
    background: #e6f7ff;
    border-radius: 4px;
  }
  .recommendation h3 {
    margin-top: 0;
  }
  .reason {
    margin-left: 20px;
    list-style-type: none;
    padding: 0;
  }
  .reason li {
    margin-bottom: 8px;
  }
  </style>